<template>
  <div class="bg-content content">
    <div class="box">
      <div class="nav"></div>
      <div class="header">
        <p>监测到您的手机号还未注册过档案</p>
        <p>请完善你的信息</p>
      </div>
      <div class="banner">
        <div class="line"></div>
        <van-field
          v-model="name"
          label="姓名"
          label-class="left"
          placeholder="请输入真实姓名"
        />
        <van-field label="手机号" v-model="phone" readonly />
        <van-cell-group>
          <van-cell
            title="证件类型"
            is-link
            :value="certificates"
            @click="certificatesDlog()"
          />
          <van-popup
            v-model="nation"
            position="bottom"
            :style="{ height: '40%' }"
          >
            <van-picker
              title="证件类型"
              show-toolbar
              :columns="columns"
              @confirm="onConfirm"
              @cancel="onCancel"
              @change="onChange"
            />
          </van-popup>
        </van-cell-group>
        <van-field v-model="numId" label="证件号" placeholder="请输证件号" />
        <van-cell-group>
          <van-cell title="性别" v-model="sexname" is-link @click="dialog()" />
          <van-popup
            v-model="sexdialog"
            position="bottom"
            :style="{ height: '40%' }"
          >
            <van-picker
              title="性别"
              show-toolbar
              :columns="sex"
              @confirm="onConfirmsex"
              @cancel="onCancel"
              @change="onChange"
            />
          </van-popup>
        </van-cell-group>
        <van-field label="邮箱" v-model="email" placeholder="请输入邮箱" />
        <div>
          <van-field label="年龄" v-model="age" placeholder="请输入年龄" />
        </div>
        <div class="line"></div>
      </div>
      <div class="message">
        <p>
          温馨提示: &nbsp;请确认以上证件信息为<span
            >您本人真实有效信息，&nbsp; 一经注册 &nbsp;不可修改!</span
          >
          &nbsp;若为他人预约可在家庭档案中管理就诊人信息 。
          <span>&nbsp;该微信号一旦绑定此证件信息将不再允许修改调整,</span>
          &nbsp;请认真操作， 谢谢您的合作
        </p>
      </div>
      <div class="end">
        <div class="close" @click="close()">取消</div>
        <div class="shore" @click="shore()">完善信息</div>
      </div>
    </div>
  </div>
</template>
<script>
import { Toast } from "vant";
import { Field } from "vant";
import { bangdingUserApi } from "@/service/api.js";
export default {
  name: "index",
  data() {
    return {
      phone: "", //电话
      name: "", //姓名
      numId: "", //证件号
      email: "", //邮箱
      age: "", //年龄
      cardtype: "", //证件index
      nation: false, //证件弹窗
      sexdialog: false, //性别弹窗
      certificates: "", //证件类型
      sexname: "", //性别
      sextype: "", //性别序号
      openid: "",
      unid: "",
      doctorlist: "",
      jiankang: "",
      columns: ["身份证", "出生证", "港澳居民往来内地通行证", "台胞居住证"],
      sex: ["男", "女"],
      dingdan: ""
    };
  },
  components: {},
  created() {
    this.phone = this.$route.query.mobile;
    this.openid = this.$route.query.openid;
    this.unid = this.$route.query.unid;
    console.log(this.phone);
    console.log(this.openid);
    console.log(this.unid);
  },
  methods: {
    // 证件弹窗
    certificatesDlog() {
      this.nation = true;
    },
    dialog() {
      this.sexdialog = true;
    },
    // 确认
    onConfirm(value, index) {
      console.log(index);
      if (index == 0) {
        this.cardtype = 1;
      } else if (index == 1) {
        this.cardtype = 6;
      } else if (index == 2) {
        this.cardtype = 4;
      } else if (index == 3) {
        this.cardtype = 7;
      }
      console.log(this.cardtype);
      this.certificates = value;
      this.nation = false;
    },
    onConfirmsex(value, index) {
      console.log(index);
      if (index == 0) {
        this.sextype = 1;
      } else if (index == 1) {
        this.sextype = 0;
      }
      this.sexname = value;
      this.sexdialog = false;
    },
    // 取消
    onCancel() {
      // Toast("取消");
      this.nation = false;
      this.sexdialog = false;
    },
    onChange(picker, value, index) {
      console.log(value);
    },
    //   取消
    close() {
      // this.$router.push({
      //   name: "login",
      // });
      this.$router.go(-1);
    },
    // 完善信息
    shore() {
      console.log("点击了完善信息");
      // 判断手机号是否正确
      let regPhone = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
      // 邮箱正则
      var emailReg = /^[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+){1,2}$/;
      // 通行证正则
      var idCard = /^[H|M]\d[0-9]{7}$/;
      // 身份证正则
      var levalard = /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
      // 出生证正则
      var birthdayCard = /^[A-Z]{1}\d[0-9]{8}$/;
      //台胞
      var taibao = /^830000[0-9]{12}$/;
      var num = /^[0-9]*$/;
      // ^830000[0-9]{12}
      var msg = "";
      if (this.name == "") {
        console.log("空");
        msg = "请输入姓名";
        Toast.fail("请输入姓名");
      }
      if (this.phone == "") {
        msg = "请输入手机号";
        Toast.fail("请输入手机号");
      }
      if (!regPhone.test(this.phone)) {
        msg = "请输入正确的手机号";
        Toast.fail("请输入正确的手机号");
      }
      if (this.sexname == "") {
        Toast.fail("请选择性别");
        msg = "请选择性别";
      }
      if (this.certificates == "") {
        Toast.fail("请选择证件类型");
        msg = "请选择证件类型";
      }

      if (this.age == "") {
        Toast.fail("请输入年龄");
        msg = "请输入年龄";
      }
      if (!num.test(this.age)) {
        msg = "请输入数字";
        Toast.fail("年龄请输入数字");
      }
      if (this.cardtype == 1) {
        // if (!levalard.test(this.numId)) {
        //   console.log(this.numId);
        //   msg = "请输入正确的证件号";
        //   Toast.fail("请输入正确的证件号");
        // }

        var idCard = this.numId;
        idCard = idCard.toUpperCase(); // 转大写
        let len = idCard.length;
        let city = {
          11: "北京",
          12: "天津",
          13: "河北",
          14: "山西",
          15: "内蒙古",
          21: "辽宁",
          22: "吉林",
          23: "黑龙江 ",
          31: "上海",
          32: "江苏",
          33: "浙江",
          34: "安徽",
          35: "福建",
          36: "江西",
          37: "山东",
          41: "河南",
          42: "湖北",
          43: "湖南",
          44: "广东",
          45: "广西",
          46: "海南",
          50: "重庆",
          51: "四川",
          52: "贵州",
          53: "云南",
          54: "西藏 ",
          61: "陕西",
          62: "甘肃",
          63: "青海",
          64: "宁夏",
          65: "新疆",
          71: "台湾",
          81: "香港",
          82: "澳门",
          91: "国外"
        };
        //1. 判断长度
        if (len !== 15 && len !== 18) {
          msg = "请输入正确的证件号";
          Toast.fail("请输入正确的证件号");
        }
        //2. 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X。
        if (!/(^\d{15})|(^̲\d{17}([0-9]|X))/.test(idCard)) {
          msg = "请输入正确的证件号";
          Toast.fail("请输入正确的证件号");
        }
        //3. 地址码
        if (!city[idCard.substr(0, 2)]) {
          msg = "请输入正确的证件号";
          Toast.fail("请输入正确的证件号");
        }

        let re;
        //4. 生日
        if (len === 15) {
          re = new RegExp(/^(\d{6})(\d{2})(\d{2})(\d{2})(\d{3})$/);
          let arrSplit = idCard.match(re);

          //检查生日日期是否正确
          let birth = new Date(
            "19" + arrSplit[2] + "/" + arrSplit[3] + "/" + arrSplit[4]
          );
          let isBirth =
            birth.getYear() === Number(arrSplit[2]) &&
            birth.getMonth() + 1 === Number(arrSplit[3]) &&
            birth.getDate() === Number(arrSplit[4]);
          if (!isBirth) {
            msg = "请输入正确的证件号";
            Toast.fail("请输入正确的证件号");
          }
        } else if (len === 18) {
          re = new RegExp(/^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$/);
          let arrSplit = idCard.match(re);

          //检查生日日期是否正确
          let birth = new Date(
            arrSplit[2] + "/" + arrSplit[3] + "/" + arrSplit[4]
          );
          let isBirth =
            birth.getFullYear() === Number(arrSplit[2]) &&
            birth.getMonth() + 1 === Number(arrSplit[3]) &&
            birth.getDate() === Number(arrSplit[4]) &&
            birth.getTime() < new Date().getTime();
          if (!isBirth) {
          } else {
            //检验18位身份证的校验码是否正确。
            //校验位按照ISO 7064:1983.MOD 11-2的规定生成，X可以认为是数字10。
            let valnum;
            let arrInt = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
            let arrCh = ["1", "0", "X", "9", "8", "7", "6", "5", "4", "3", "2"];
            let nTemp = 0,
              i;
            for (i = 0; i < 17; i++) {
              nTemp += idCard.substr(i, 1) * arrInt[i];
            }
            valnum = arrCh[nTemp % 11];
            if (valnum !== idCard.substr(17, 1)) {
              msg = "请输入正确的证件号";
              Toast.fail("请输入正确的证件号");
            }
          }
        }
      }
      if (this.cardtype == 6) {
        if (!birthdayCard.test(this.numId)) {
          console.log(2);
          msg = "请输入正确的证件号";
          Toast.fail("请输入正确的证件号");
        }
      }
      if (this.cardtype == 4) {
        if (!idCard.test(this.numId)) {
          console.log(3);
          msg = "请输入正确的证件号";
          Toast.fail("请输入正确的证件号");
        }
      }
      if (this.cardtype == 7) {
        if (!taibao.test(this.numId)) {
          console.log(4);
          msg = "请输入正确的证件号";
          Toast.fail("请输入正确的证件号");
        }
      }
      if (msg == "") {
        // 执行接口
        bangdingUserApi({
          name: this.name, //姓名
          mobile: this.phone, //电话
          wxOpenid: this.openid, //微信oppenid
          unid: this.unid, //unid
          source: "16", //默认传16
          cardtype: this.cardtype, //证件类型
          cardno: this.numId, //证件号
          email: this.email, //邮箱
          age: this.age, //年龄
          sex: this.sextype //性别
        }).then(res => {
          console.log(res);
          this.msg = res.msg;

          if (res.code == 4000) {
            Toast.success("绑定成功");
            window.localStorage.removeItem("name");
            this.token = res.data;
            let token = JSON.stringify(this.token);
            localStorage.setItem("token", token);
            this.$router.go(-2);
          } else if (res.code == 4001) {
            //失败
            Toast.fail({
              message: this.msg
            });
          } else {
            Toast.fail({
              message: this.msg
            });
          }
        });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.van-cell {
  font-size: 15px;
  font-family: PingFang SC;
  //   font-weight: bold;
  // color: red !important;
}
.bg {
  .box {
    .nav {
      height: 44px;
    }
    .header {
      margin-top: 10px;
      text-align: center;
      color: red;
      font-size: 15px;
    }
    .banner {
      margin-bottom: 10px;
      .line {
        width: 100%;
        height: 1px;
        background-color: #f3eded;
        margin: 0 auto;
      }
    }
    .message {
      margin-bottom: 10px;
      margin-left: 10px;
      margin-right: 10px;
      p {
        font-size: 16px;
        font-family: PingFang SC;
        //   font-weight: bold;
        color: #4d4b4b;
        text-align: justify;
        text-align: center;
        span {
          color: red;
        }
      }
    }
    .end {
      display: flex;
      justify-content: space-around;
      .close {
        width: 165px;
        height: 45px;
        background: red;
        color: #ffffff;
        text-align: center;
        line-height: 45px;
        border-radius: 5px;
        font-size: 18px;
        font-family: PingFang SC;
      }
      .shore {
        width: 165px;
        height: 45px;
        background: rgb(110, 221, 110);
        color: #ffffff;
        text-align: center;
        line-height: 45px;
        border-radius: 5px;
        font-size: 18px;
        font-family: PingFang SC;
      }
    }
  }
}
</style>
